<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>父元素的宽度是最大的子元素的宽度</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    .box {
        border: 1px solid black;
        text-align: center;
        margin: auto;
    }
    .box1 {
        border: 1px solid black;
        text-align: center;
        margin: auto;
        max-width: 300px;
        max-width: min-content;
    }
    .box1 img{
        max-width: inherit;
    }
</style>

<body>
    <!-- 修改前 -->
    <div class="box">
        <img src="./img/bg.png" alt="">
        zhdjsefshadjkmsawfbdjsk
    </div>
    <!-- 修改后 -->
    <div class="box1">
        <img src="./img/bg.png" alt="">
        zhdjsefshadjkmsawfbdjsk
    </div>
</body>
<script type="text/javascript">
</script>

</html>